<!-- reportingResults -->
<template>
    <div class="page">
        <div class="fh" @click="backHome()">
            <img class='contentg' src="../../assets/img/features/closeIcon.png" alt="">
        </div>
        <!-- 页面内容 -->
        <div class="content">
            <!---->
            <div class='contentTop'>
                <div class="contentTopLeft">报告已保存</div>
                <img class='contentTopRight' src="../../assets/img/ybcb.png" alt="">
            </div>
            <!---->
            <div class="contentSectvon">
                <div class="contentSectvonTop">
                    <div>{{ reportSaved }}</div>
                    <div>
                        {{ reportSaved1 }}
                    </div>
                </div>
                <div class="contentSectvonBottom">
                    <div class="SectvonBottomdv" style="margin-top: 0px">
                        <div class="SectvonBottomdvLeft">邀请人</div>
                        <div class="SectvonBottomdvRght">
                            <span>{{ obj.applyManInfo }}</span>
                        </div>
                    </div>
                    <div class="SectvonBottomdv">
                        <div class="SectvonBottomdvLeft">邀请时间</div>
                        <div class="SectvonBottomdvRght">{{ obj.inviteTime }}</div>
                    </div>
                    <div class="SectvonBottomdv">
                        <div class="SectvonBottomdvLeft">邀请编码</div>
                        <div class="SectvonBottomdvRght" @click="copyInviteCode(obj.inviteCode)">{{ obj.inviteCode }}
                            <span class="leftBut">复制</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 报告标题 -->
            <div class="contentReportTte">
                <div></div>
                <div>报告内容</div>
                <div></div>
            </div>

            <!-- 报告内容 -->
            <div class="contentReportValue">
                <!-- <div class="reportValueLeft" v-if="obj.reportType == 1 || obj.reportType == 3"> -->
                <!-- v-if="obj.reportType == 1|| obj.reportType == 3" -->
                <div class="reportValueLeft" v-if="obj.reportType == 1 || obj.reportType == 3">
                    <div class="reportValueLeftDv">
                        <img src="../../assets/img/jb.png" alt="">
                    </div>
                    <div class="reportValueLeftDv">简版</div>
                    <div class="reportValueLeftDv">
                        <div @click="getDetailedVersion(1)" v-log-button-name="'保单检视_导览页保存后_查看'">查看</div>
                    </div>
                    <div class="reportValueLeftDv animate-size">
                        <div @click="reportShare(0)" v-log-button-name="'保单检视_导览页保存后_获取验证码'">获取分享码</div>
                    </div>
                    <!-- <fleeTime  style="margin-top: 20px;" :title="'查看'" @click="getDetailedVersion(1)"></fleeTime> -->
                    <!-- <fleeTime  style="margin-top: 12px;" :title="'获取验证码'" @click="reportShare(0)"></fleeTime> -->
                </div>
                <!-- <div class="reportValueRight"  v-if="obj.reportType == 2 || obj.reportType == 3"> -->
                <!-- v-if="obj.reportType == 2 || obj.reportType == 3" -->
                <!-- v-if="obj.reportType == 2 || obj.reportType == 3" -->
                <div class="reportValueRight" v-if="obj.reportType == 2 || obj.reportType == 3">
                    <div class="reportValueRightDv">
                        <img src="../../assets/img/xb.png" alt="">
                    </div>
                    <div class="reportValueRightDv">详版</div>
                    <div class="reportValueRightDv">
                        <div @click="getDetailedVersion(2)" v-log-button-name="'保单检视_导览页保存后_查看'">查看</div>
                    </div>
                    <div class="reportValueRightDv animate-size">
                        <div @click="reportShare(1)" v-log-button-name="'保单检视_导览页保存后_获取验证码'">获取分享码</div>
                    </div>
                    <!-- <fleeTime  style="margin-top: 20px;" :title="'查看'" @click="getDetailedVersion(2)"></fleeTime>
                    <fleeTime  style="margin-top: 12px;" :title="'获取验证码'" @click="reportShare(1)"></fleeTime> -->
                </div>
            </div>
            <div @click="goJst()" class="contentReportBtoom" v-html="jstText"></div>
            <!---->
            <!-- 240626 注释 gll -->
            <!-- <div class="contentReportBtoom">此报告尚属于预览状态，如您始终未选择保存报告,本链接将于您进入本链接7天后失效。</div> -->
        </div>
    </div>
</template>

<script lang="ts" setup name="reportingResultybc">
import { useRouter, useRoute } from "vue-router"
import { Toast } from '/@/utils/Message';
import { onMounted } from "vue"
import { reactive, ref } from 'vue'
import { confirmDialog } from '/@/utils/reviewH5/Message'
import customNavBar from "/src/components/NavBar/customNavBar.vue"
import viewReport from "../../assets/img/tast/htt.png"
import { taskInvitationInfo, getConfiguration, createCustomMark } from "../../api/auth/repot.ts"
import {
    jstJointLogin,
    letterControllerjstUrl
} from "/@/api/auth/simpleVersion.ts";
import { interactive } from "/@/assets/js/interactive"
import useClipboard from "vue-clipboard3";
import fleeTime from "/@/components/button/fleeTime.vue";
const router = useRouter()
const route = useRoute()
const leftTetx = ref("")
const contentSectionShow = ref(false)
const obj: any = ref({})
const reportSaved = ref<any>('')
const reportSaved1 = ref<any>('')
let data = reactive({
    ...route.query,
});


const backHome = () => {
    // router.go(-1)
    confirmDialog(router)
}

const getDetailedVersion = (v: any) => {
    router.push({
        path: 'detailedVersion',
        query: {
            reportType: v,
            taskCode: data.taskCode,
            token: route.query.token,
            userType: obj.value.userType,
            isYsc: 1,
            face: route.query.face,
        }
    })
}
const textValue = ref<string>('');
const { toClipboard } = useClipboard();
const copyInviteCode = async (val:any) => {
  try {
    textValue.value = val
    await toClipboard(textValue.value); 
    Toast("复制成功");
  } catch (e:any) {
    Toast(e);
  }
};
const goJst = () => {
    window.open('https://a.app.qq.com/o/simple.jsp?pkgname=com.sinosoft.csplatform')
}
const reportShare = (v: any) => {
    router.push({
        name: "reportingResultShare",
        query: {
            taskCode: route.query.taskCode,
            reportType: v + 1,
            userType: obj.value.userType,
            isYsc: 1,
            face: route.query.face,
        },
    });
}
let face: any = undefined
const jstText = ref<any>('')
onMounted(async () => {
    const b = await getConfiguration({ name: 'guideTextReport' })
    jstText.value = b.data
    face = route.query.face
    if (face && route.query.token) {
        // localhost:8080/policyReviewH5/detailedVersionjst?taskCode=040b49bad6883e9ac02d15727943e536f7c495e19fe922f76c6e8d110f920366c7aa1a7ddb4b0569a4e5c9e7cab6bf7a1c11b0ab65151e0be642635d4e809e55183b485e142969c0515ecdf18c8f9fef77b5dc0048e2c019d5dc48bcd8175e390da9b85eae047d5270bc9d0ea9a6baf65037c2dcfdb43241d0&reportType=1&token=11&face=true
        let custoken = sessionStorage.getItem('customToken')
        if (!custoken) {
            // face表示从金事通进来的 !custoken表示没有获取过的
            jstJointLogin({ taskCode: route.query.taskCode, token: route.query.token }).then(
                (res: any) => {
                    if (res.code == 200) {
                        sessionStorage.removeItem('customToken')
                        sessionStorage.setItem('customToken', res.customToken)
                    } else if (res.code == 40201) {
                        //  去金世通
                        // 退出登录并跳转登录页面
                        sessionStorage.clear()
                        interactive({
                            method: "reLogin",
                            data: {
                                code: '901',
                                msg: ''
                            }
                        })
                        // letterControllerjstUrl({}).then((a: any) => {
                        //   if (a.code == 200) {
                        //     	// 退出登录并跳转登录页面
                        // 				sessionStorage.clear()
                        // 			interactive({
                        // 				method:"reLogin",
                        // 				data:{
                        // 					code:'901',
                        // 					msg:''
                        // 				}
                        // 			})
                        // 			// Toast('跳转金事通页面')
                        // 			// window.location.href = `${a.jstUrl}`;
                        //   }
                        // });
                    }
                }
            )
        }
    }
    const a = await getConfiguration({ name: 'reportSaved' })
    reportSaved.value = a.data.split('&')[0]
    reportSaved1.value = a.data.split('&')[1]
    taskInvitationInfo({ taskCode: data.taskCode }).then((a: any) => {
        if (a.code == 200) {
            obj.value = a.data
        }
    });
})
</script>

<!-- less嵌套设置 -->
<style lang="less" scoped>
.page {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(180deg, #8dc2f7 0%, #87C3FE 6%, #9BCEFE 11%, #B0DCFF 16%, #BAE1FE 21%, #D9EBFC 26%, #F5F7FA 100%), radial-gradient(0% 19% at 0% 0%, #90C7FF 0%, rgba(181, 222, 254, 0) 100%);

    .fh {
        text-align: left;
        margin-top: 40px;
        padding-left: 13px;
    }

    .contentg {
        width: 33px;
        height: 33px;
    }

    .content {
        width: 100%;
        overflow: hidden;

        .contentTop {
            display: flex;
            padding: 0 30px;
            align-items: center;
            justify-content: space-between;

            .contentTopLeft {
                color: #15265A;
                font-size: 30px;
                font-weight: bold;
            }

            .contentTopRight {
                top: -10px;
                width: 130px;
                height: 130px;
                position: relative;
            }
        }

        .contentSectvon {
            width: 94%;
            height: auto;
            padding: 0 10px;
            overflow: hidden;
            margin-left: 17px;
            padding-bottom: 12px;
            background: url(../../assets/img/ybcbg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .contentSectvonTop {
                font-size: 13px;
                color: #FFFFFF;
                margin-top: 19px;
                text-align: left;
                line-height: 23px;

                div:last-child {
                    margin-top: 3px;
                    text-indent: 10px;
                }
            }

            .contentSectvonBottom {
                width: 100%;
                height: auto;
                margin-top: 17px;
                padding: 17px 17px;
                border-radius: 10px;
                background: linear-gradient(180deg, #F0F3FE 0%, #F5F7FE 6%, #FDFDFE 11%, #FEFEFE 22%, #FDFDFE 48%, rgba(246, 248, 254, 0.97) 67%, rgba(255, 255, 255, 0.95) 100%);

                .SectvonBottomdv {
                    display: flex;
                    margin-top: 13px;
                    justify-content: space-between;

                    .SectvonBottomdvLeft {
                        opacity: 0.57;
                        font-size: 13px;
                        color: #222222;
                    }

                    .SectvonBottomdvRght {
                        font-size: 13px;
                        color: #222222;
                        font-weight: bold;

                        span:last-child {
                            margin-left: 7px;
                        }

                        .leftBut {
                            width: 100px;
                            height: 23px;
                            font-size: 12px;
                            padding:3px 8px;
                            font-weight: 400;
                            margin-left: 0px !important;
                            color: #0080FF;
                            line-height: 23px;
                            border-radius:8px;
                            background: rgba(25, 138, 250, 0.06);
                            border: 1px solid rgba(25, 138, 250, 0.32);
                        }
                    }
                }
            }
        }

        .contentReportTte {
            width: 100%;
            display: flex;
            margin-top: 30px;
            align-items: center;
            justify-content: center;

            div:nth-child(1) {
                width: 47px;
                height: 1px;
                opacity: 0.4;
                background: linear-gradient(270deg, #222222 0%, rgba(34, 34, 34, 0) 100%);
            }

            div:nth-child(2) {
                font-size: 17px;
                color: #2E2E2E;
                font-weight: bold;
                margin-left: 40px;
            }

            div:nth-child(3) {
                width: 47px;
                height: 1px;
                opacity: 0.4;
                margin-left: 40px;
                background: linear-gradient(270deg, #222222 0%, rgba(34, 34, 34, 0) 100%);
            }
        }

        .contentReportValue {
            padding: 0 19px;
            margin-bottom: 20px;
            width: 95%;
            height: 250px;
            margin: 0 auto;
            text-align: left;

            .reportValueLeft {
                display: inline-block;
                width: 45%;
                text-align: center;
                display: inline-block;
                // max-width:200px;
                margin-top: 17px;
                margin-left: 3%;
                padding: 16px 0 16px 0;
                box-shadow: 0px 2 6px 0px rgba(0, 63, 159, 0.1);
                background: linear-gradient(180deg, #F0F3FE 0%, #F5F7FE 6%, #FDFDFE 11%, #FEFEFE 22%, #FDFDFE 48%, rgba(246, 248, 254, 0.97) 67%, rgba(255, 255, 255, 0.95) 100%);

                .reportValueLeftDv {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }

                .reportValueLeftDv:nth-child(1) img {
                    width: 53px;
                    height: 53px;
                    margin-top: 10px;
                }

                .reportValueLeftDv:nth-child(2) {
                    font-size: 15.7px;
                    margin-top: 7px;
                    color: #222222;
                    font-weight: bold;
                }

                .reportValueLeftDv:nth-child(3) div {
                    width: 100px;
                    height: 23px;
                    font-size: 15px;
                    margin-top: 13px;
                    color: #0080FF;
                    line-height: 23px;
                    border-radius: 13px;
                    background: rgba(25, 138, 250, 0.06);
                    border: 1px solid rgba(25, 138, 250, 0.32);
                }

                .reportValueLeftDv:nth-child(4) div {
                    width: 100px;
                    height: 23px;
                    font-size: 15px;
                    margin-top: 19px;
                    color: #0080FF;
                    line-height: 23px;
                    border-radius: 13px;
                    background: rgba(25, 138, 250, 0.06);
                    border: 1px solid rgba(25, 138, 250, 0.32);
                }
            }

            .reportValueRight {
                display: inline-block;
                width: 45%;
                background-color: gold;
                text-align: center;
                display: inline-block;
                // max-width: 200px;
                margin-top: 17px;
                margin-left: 3%;
                padding: 16px 0 16px 0;
                box-shadow: 0px 2 6px 0px rgba(0, 63, 159, 0.1);
                background: linear-gradient(180deg, #F0F3FE 0%, #F5F7FE 6%, #FDFDFE 11%, #FEFEFE 22%, #FDFDFE 48%, rgba(246, 248, 254, 0.97) 67%, rgba(255, 255, 255, 0.95) 100%);

                .reportValueRightDv {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }

                .reportValueRightDv:nth-child(1) img {
                    width: 53px;
                    height: 53px;
                    margin-top: 10px;
                }

                .reportValueRightDv:nth-child(2) {
                    font-size: 15.7px;
                    margin-top: 7px;
                    color: #222223;
                    font-weight: bold;
                }

                .reportValueRightDv:nth-child(3) div {
                    width: 90px;
                    height: 23px;
                    font-size: 15px;
                    margin-top: 13px;
                    color: #0080FF;
                    line-height: 23px;
                    border-radius: 13px;
                    background: rgba(25, 138, 250, 0.06);
                    border: 1px solid rgba(25, 138, 250, 0.32);
                }

                .reportValueRightDv:nth-child(4) div {
                    // width: 90px;
                    // height: 23px;
                    padding: 3px 9px;
                    font-size: 15px;
                    margin-top: 19px;
                    color: #0080FF;
                    line-height: 23px;
                    border-radius: 13px;
                    background: rgba(25, 138, 250, 0.06);
                    border: 1px solid rgba(25, 138, 250, 0.32);
                }
            }

            @media (min-width: 450px) {

                .reportValueLeft,
                .reportValueRight {
                    width: 45%;
                    margin-left: 4%;
                }
            }

            @media (min-width: 550px) {

                .reportValueLeft,
                .reportValueRight {
                    width: 40%;
                    margin-left: 7%;
                }
            }

            @media (min-width: 650px) {

                .reportValueLeft,
                .reportValueRight {
                    width: 35%;
                    margin-left: 10%;
                }
            }

        }

        .contentReportBtoom {
            margin: 30px 0;
            font-size: 13px;
            padding: 0 19px;
            text-align: left;
            color: #808080;
        }
    }

    .animate-size {
        // margin: 8px 12px;
        animation: streamer 2s linear infinite;
    }

    @keyframes streamer {
        0% {
            transform: scale(1);
        }

        20% {
            transform: scale(0.8);
        }

        40% {
            transform: scale(1);
        }

        60% {
            transform: scale(1.2);
        }

        80% {
            transform: scale(1);
        }

    }
}
</style>
